<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<link rel="stylesheet" href="./css/bootstrap.min.css">
  <script type="text/javascript" src="./js/jquery-3.1.1.min.js"></script>

  <style type="text/css">
	<style type="text/css">
	.hehe{
		margin-top: 10px;
	}
	.form-control{
		width: 30%;
	}
	.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
		}
    label{
      display: block;
    }
  .form-control{
    display: inline;
  }
	</style>
	<title>注册页面</title>
</head>
<body>
<div class="col-md-12">
	<ul class="nav nav-pills">
  <li role="presentation" class="active"><a href="#">留言板</a></li>
  <li role="presentation"><a href="../index.php">返回首页</a></li>
  <li role="presentation"><a href="./login.html">登录界面</a></li>
</ul>


<div class="container">

      <div class="starter-template">
          <form class="hehe" action="../register.php" method="post">
  <div class="form-group">
    <label for="exampleInputEmail1">邮箱</label> 
   <input type="text" class="form-control" id="mail" placeholder="邮箱" name="sex"><span class="info"></span>
   <!-- <span class="glyphicon glyphicon-remove" style="color:red" aria-hidden="true"></span> -->
  </div>
   <div class="form-group">
    <label for="exampleInputEmail1">昵称</label>
   <input type="text" class="form-control" placeholder="昵称" name="nikename" id="nike"><span class="info"></span>
  </div>
   <div class="form-group">
    <label for="exampleInputEmail1">用户名</label>
   <input type="text" class="form-control userinfo" placeholder="用户名" name="username" id="user"><span class="info"></span>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">密码</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="密码" name="password"><span class="info"></span>
  </div>
    <div class="form-group">
    <label for="exampleInputPassword1">再次输入密码</label>
    <input type="password" class="form-control" id="exampleInputPassword2" placeholder="密码" name="password"><span class="info"></span>
  </div>
  <button type="submit" class="btn btn-default">点击注册提交</button>
</form>
      </div>

    </div>
    <script type="text/javascript">
    $(function  () {
       //邮箱验证开始
       $('#mail').blur(function(event) {
         mail = $(this).val();
         objmail = $(this);

         $.ajax({
           url: '../Aregister.php',
           type: 'post',
           dataType: 'json',
           data: {amail: mail},
         })
         .done(function(data) {
           if (data.error==1) {
              objmail.siblings('.info').html('<span class="glyphicon glyphicon-remove" style="color:red" aria-hidden="true"></span>'+data.info);
           }else{
            objmail.siblings('.info').html('<span class="glyphicon glyphicon-ok" style="color:green" aria-hidden="true"></span>'+data.info);
          }
         })
         .fail(function() {
           objmail.siblings('.info').html('<span class="glyphicon glyphicon-remove" style="color:red" aria-hidden="true">不能为空邮箱</span>');
         })
       });
       //邮箱验证结束 , 昵称验证开始
       $('#nike').blur(function(event) {
         nike = $(this).val();
         objnike = $(this);

         $.ajax({
           url: '../Aregister.php',
           type: 'post',
           dataType: 'json',
           data: {anike: nike},
         })
         .done(function(data) {
           if (data.error==1) {
              objnike.siblings('.info').html('<span class="glyphicon glyphicon-remove" style="color:red" aria-hidden="true"></span>'+data.info);
           }else{
            objnike.siblings('.info').html('<span class="glyphicon glyphicon-ok" style="color:green" aria-hidden="true"></span>'+data.info);
          }
         })
         .fail(function() {
           objnike.siblings('.info').html('<span class="glyphicon glyphicon-remove" style="color:red" aria-hidden="true">昵称不能为空</span>');
         })
       });
       //昵称验证结束, 用户名验证开始
        $('#user').blur(function(event) {
         user = $(this).val();
         objuser = $(this);

         $.ajax({
           url: '../Aregister.php',
           type: 'post',
           dataType: 'json',
           data: {auser: user},
         })
         .done(function(data) {
           if (data.error==1) {
              objuser.siblings('.info').html('<span class="glyphicon glyphicon-remove" style="color:red" aria-hidden="true"></span>'+data.info);
           }else{
            objuser.siblings('.info').html('<span class="glyphicon glyphicon-ok" style="color:green" aria-hidden="true"></span>'+data.info);
          }
         })
         .fail(function() {
           objuser.siblings('.info').html('<span class="glyphicon glyphicon-remove" style="color:red" aria-hidden="true">用户名不能为空</span>');
         })
       });
        //用户名验证结束
        //密码的重复验证
        // pad1 = $('#exampleInputPassword1').val();
        // pad2 = $('#exampleInputPassword2').val();
           
        $('#exampleInputPassword1').blur(function(event) {
             pad1 = $(this).val();
             // console.log(pad1);
            if (pad1=="") {
              $(this).siblings('.info').html('<span class="glyphicon glyphicon-remove" style="color:red" aria-hidden="true">密码不能为空</span>')
            }else{
              $(this).siblings('.info').html('');
            }
        });
        $('#exampleInputPassword2').blur(function(event) {
              pad2 = $(this).val();
              if (pad1!=pad2) {
                $(this).siblings('.info').html('<span class="glyphicon glyphicon-remove" style="color:red" aria-hidden="true">密码不一样</span>');
              }else{
                 $(this).siblings('.info').html('<span class="glyphicon glyphicon-ok" style="color:green" aria-hidden="true">重复密码一样</span>');
              };
        });
    })


    </script>
</body>
</html>